<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Flipbook (draft)</title>
    <style type="text/css">
      body {
	  background-color: black;
	  color: white;
      }

      .ui-effects-transfer {
	  border: 2px dotted gray;
      }
    </style>
    <script type="text/javascript" src="jquery.js"></script>    
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript" src="jquery.event.special.gesture.js"></script>    
    <script type="text/javascript" src="jquery.gestureable.js"></script>    
    <script type="text/javascript">
      /* Code to do some fancy book-like effects
       */

       /* a closure-based class */
       var ImageManager = function (images) {
	   var self = this;
	   var currentPage = 0;

	   self.getCurrentPages = function () {
	       return [images[currentPage], 
		       images[currentPage+1]];
	   };

	   self.turnNext = function () {
	       currentPage += 2;
	       return self.getCurrentPages();
	   };

	   self.turnPrevious = function () {
	       currentPage -= 2;
	       return self.getCurrentPages();
	   };
       };

       function style_element(element) {
	  element.css('background-color', 'black');
          element.css('width', '900px');
	  element.css('height', '650px');
	  element.css('border', '2px dashed white');
      }

      function small_gesture(event) {
	  /* called in mousedown of small images */
	  var container = $(event.target).closest('div');
	  var manager = container.data('manager');
	  var large = $(event.target).
	      attr('src').
	      replace(/small/, 'large');

	  switch (event.gesture) {
	  case 'U':
	  case 'D':
	      container.data('left').hide();
	      container.data('right').hide();
	      container.data('spacer').hide();
	      container.data('zoomed').attr('src', large).show('clip');
	      break;
	  case 'L':
	      var images = manager.turnPrevious();
	      container.data('left').attr('src', images[0] + '_small.jpg');
	      container.data('right').attr('src', images[1] + '_small.jpg');
	      break;
	  case 'R':
	      var images = manager.turnNext();
	      container.data('left').attr('src', images[0] + '_small.jpg');
	      container.data('right').attr('src', images[1] + '_small.jpg');
	      break;
	  }
      }

      function large_gesture(event) {
	  var container = $(event.target).closest('div');
	  switch (event.gesture) {
	  case 'U':
	  case 'D':
	      $(event.target).hide();
	      container.data('spacer').show();
	      container.data('left').show();
	      container.data('right').show();
	  }
      }

      function disable_scroll(event) {
	  /* Simply disables the dragging of elements */
	  return false;
      }

      function flipbook(element, images) {
	  var manager = new ImageManager(images);
	  element.data('manager', manager);

	  // apply the style
	  style_element(element);

	  // create a spacer div and attach it
	  var spacer = $('<div class="spacer"></div>');
	  spacer.css('height', '162px');
	  element.data('spacer', spacer);
	  element.append(spacer);

	  var zoomed = $('<img />');
	  zoomed.gestureable();
	  zoomed.mouseup(large_gesture).
	  mousedown(disable_scroll).
	  hide();

	  element.data('zoomed', zoomed);
	  element.append(zoomed);

	  // create the images
	  var currentImages = manager.getCurrentPages();
	  var left = $('<img src="' + currentImages[0] + '_small.jpg" />');
	  var right = $('<img src="' + currentImages[1] + '_small.jpg" />');
	  element.data('left', left);
	  element.data('right', right);

	  $([left, right]).each(function (key, value) {
	      // enable gestures
	      value.gestureable();
	      value.mouseup(small_gesture);
	      value.mousedown(disable_scroll);
	      // add to the display
	      element.append(value);
	  });
      }

      $(document).ready(function () {
	  flipbook($('#flipbook'),
		   ['image_01', 'image_02', 'image_03', 'image_04',
		    'image_05', 'image_06', 'image_07', 'image_08',
		    'image_09', 'image_10', 'image_11', 'image_12',
		    'image_13', 'image_14', 'image_15']);
	});
    </script>
  </head>
  <body>
    <div id="flipbook"></div>
    <p>Usage: gesture left/right to change images, up/down to zoom in/out</p>
    <p>The flipbook uses a number of libs:</p>
    <p>
      <ul>
	<li>jQuery</li>
	<li>jQuery UI</li>
	<li>jQuery Special Event Gestures</li>
      </ul>
    </p>
  </body>
</html>
